<template>
	<view>
		<view class="movie-header">
			<img src="/static/icos/back.png" alt="" style="width: 50rpx;height: 50rpx;padding-left: 50rpx;padding-top: 110rpx;" @click="goback">
			<img src="/static/background/details.png" style="width: 100%;height: 100%;">
			
		</view>
		<view class="">
			<p style="text-align: center;font-size: 30px;padding-bottom: 10rpx;">迪士尼的阿拉丁</p>
			<p style="text-align: center;font-size: 12px;color: #CECDD8;padding-bottom: 50rpx;">2019 · 冒险、戏剧&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;· 2小时8分钟</p> 
		</view>
		<view class="button-style">
			<view class="custom-style">
				<u-button shape="circle" icon="play-right" color="#6152FF"  iconColor="white">观看</u-button>
			</view>
			<view class="custom-style">
				<u-button shape="circle" icon="arrow-downward" color="#150e70" iconColor="white" @click="show = true">下载</u-button>
				<u-modal :show="show" :showConfirmButton="false"   :closeOnClickOverlay="true" width="500rpx" @close="show=false">
					<view style="display: flex;flex-direction: column;">
						<view class="">
							<img src="/static/icos/download.png" style="width: 180rpx;height: 160rpx;">
							<p style="font-size: 20px;color: #06041F;">下载文件</p>
						</view>
						<u-divider style="width:300rpx"></u-divider>
						<view class="">
							<u-radio-group v-model="radiovalue1" placement="column"  @change="groupChange" >
								<u-radio :customStyle="{marginBottom: '10px'}" shape="square" v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.name"  @change="radioChange" >
								</u-radio>
							</u-radio-group>
						</view>
						<view style="padding-top: 50rpx;">
							<u-button shape="circle" icon="arrow-downward" color="#6152FF" iconColor="white" @click="downLoad">下载</u-button>
						</view>
					</view>
				</u-modal>	
			</view>
		</view>
		<view class="text-style">
			<u-read-more :showHeight="50" :shadowStyle="shadowStyle" :toggle="true">
				<rich-text :nodes="content" ></rich-text>
			</u-read-more>
		</view>
		<view class="footer-style">
			<view class="tab-style">
				<u-tabs
				 :list="list1"  
				 lineColor="#6152FF"
				 lineWidth="100"
				 :activeStyle="{
					color: '#6152FF',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				 }"
				 itemStyle="width:25%;height:90rpx"
				 @click="change">
				</u-tabs>	
			</view>	 
			<view class="" style="padding-top: 30rpx;" >
				<view  class="chaqu" v-show="tabName == '插曲'" style="margin-top: 20rpx;padding-left: 5%;">
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="3">
							<view class="demo-layout bg-purple-light">
									<video src="" style="width: 200px;"></video>
							</view>
						</u-col>
						<u-col span="9">
							<view class="demo-layout bg-purple">
								<p style="color: #FFFFFF;font-size: 16px;">阿拉丁</p>
								<p style="color: #A5A4B1;font-size: 12px;">阿拉丁，一个爱上公主的街头男孩。由于种姓和财富的差异，阿拉丁试图找到。。。</p>
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="" v-show="tabName == '类似的'">
					<view class="movie-list">
						<view class="movie-wapper" v-for="item in welList" :key="item.id" :value="item.id">
							<image :src="item.img" class="poster" @click="changeDetails"></image>
						</view>
					</view>
				</view>
				<view  v-show="tabName == '关于'" style="margin-top: 20rpx;padding-left: 5%;">
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="6">
							<view class="demo-layout bg-purple-light">
								<p style="color: #A5A4B1;font-size: 12px;">体裁</p>
							</view>
						</u-col>
						<u-col span="6">
							<view class="demo-layout bg-purple">
								<p style="color: #A5A4B1;font-size: 12px;">语言文本</p>
							</view>
						</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="6">
							<view class="demo-layout bg-purple-light">
								<p style="color: #FFFFFF;font-size: 16px;">冒险、喜剧、家庭</p>
							</view>
						</u-col>
						<u-col span="6">
							<view class="demo-layout bg-purple">
								<p style="color: #FFFFFF;font-size: 16px;">英语</p>
							</view>
						</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="6">
							<view class="demo-layout bg-purple-light">
								<p style="color: #A5A4B1;font-size: 12px;">年</p>
							</view>
						</u-col>
						<u-col span="6">
							<view class="demo-layout bg-purple">
								<p style="color: #A5A4B1;font-size: 12px;">国</p>
							</view>
						</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="6">
							<view class="demo-layout bg-purple-light">
								<p style="color: #FFFFFF;font-size: 16px;">2019</p>
							</view>
						</u-col>
						<u-col span="6">
							<view class="demo-layout bg-purple">
								<p style="color: #FFFFFF;font-size: 16px;">美国</p>
							</view>
						</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="12">
							<view class="demo-layout bg-purple-light">
								<p style="color: #A5A4B1;font-size: 12px;">演员</p>
							</view>
						</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="12">
							<view class="demo-layout bg-purple-light">
								<u-scroll-list>
									<view v-for="(item, index) in actorList" :key="index">
										<image :src="item.thumb" style="width: 210upx;height: 250upx; padding-right: 20rpx ;"></image>
									</view>
								</u-scroll-list>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				movieName:'',
				show:false,
				content:`阿拉丁，《一千零一夜》故事《阿拉丁神灯》中的主人公，在故事原著中是一位来自极东之国首都（唐长安）的异邦人。这个名字因有众多近代的后续作品而闻名于世，如迪士尼出品的电影《阿拉丁》，改编自故事原作，是迪士尼第一部推出续集影音产品首映的经典动画，获得奥斯卡最佳原著配乐奖等。`,
				shadowStyle: {
					background: "#06041F",
					paddingTop: "0",
					marginTop: "20rpx"
				},
				radiolist1: [
					{
						name: '高 （1080p）',
						disabled: false
				    },
					{
						name: '中等（720p）',
						disabled: false
					},
					{
						name: '低  （360p）',
						disabled: false
					}, 
				],
				  // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '高（1080p）',
				tabName:'插曲',
				welList:[
					{
						id:'1',
						img:'/static/poster/civilwar.jpg'
					},
					{
						id:'2',
						img :'/static/poster/justice.png'
					},
					{
						id:'3',
						img:'/static/poster/aladdin.png'
					},
					
				],
				list1: [
					{
						name: '插曲',
					}, 
					{
						name: '类似的',
					}, 
					{
						name: '关于',
					}
				],
				welList:[
					{
						id:'1',
						img:'/static/poster/civilwar.jpg'
					},
					{
						id:'2',
						img:'/static/poster/justice.png'
					},
					{
						id:'3',
						img:'/static/poster/aladdin.png'
					},
					
				],
				actorList:[
					{
						thumb: "/static/actor/1.png"
					}, {
						thumb: "/static/actor/2.png"
					}, {
						thumb: "/static/actor/3.png"
					}
				]
			}
		},
		onLoad() {
		},
		onShow() {
		},
		methods: {
			change(e){
				this.tabName = e.name 
				console.log(e);
			},
			goback(){
				uni.navigateBack({
					delta:1,//返回层数，2则上上页
				})
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			downLoad(){
				uni.switchTab({
					url:"/pages/download/download"
				})
			}
		}
	}
</script>

<style>
page{
	background: linear-gradient(to bottom,#06041F,#06041F);
	color: white;
}
.movie-header{
	width: 100%;
	height: 600upx;
}
.custom-style {
	width: 320rpx;
	margin: 0 auto;
}
.button-style{
	display: flex;
	padding-bottom: 50rpx;
}
.text-style{
	margin: 0 auto;
	padding-left: 5%;
	font-size: 12px;
	color: #CECDD8;
	padding-bottom: 50rpx;
}
.footer-style{
	padding-left: 2%;
}
.tab-style{
	width: 100%;
}
/* .chaqu{
	display: flex;
} */

.video_style{
	width: 35%;
}
.text_style{
	width: 60%;
}
.movie-list{
	padding-left: 10px;
	display: flex;
	justify-content: flex-start;
	flex-direction: row;  
	flex-wrap: wrap;
}
.movie-wapper{
	  
	padding: 10upx 20upx;
}
.poster{
	width: 200upx;
	height: 270upx;
}
</style>
